﻿@model SelfMadeMillionaire.Web.Infrastructure.ViewModels.Account.BallanceDueViewModel
<p style="font-size: medium;">
    
    <div id ="promoCodeErrorMessage" style="display: none;">
    </div>
    
    <div id ="promoCodeSection" style="padding-left:40px;">
        <br/>
        Enter promo code: &nbsp; <span id ="promocodevalue">@Html.TextBoxFor(m=>m.PromoCode)</span>
        <button id="applyPromoCode">Apply</button>
        <br/><br/>
    </div>
    
    <div style="float: left;padding-right: 25px;padding-left:40px;">
        <strong>Balance Due: <span id ="costDue" style="color: #d80000; font-weight: 700;">$@Model.CostDue</span></strong>
    </div>
    <div id ="balanceDueDescription" ><strong>Description:&nbsp;</strong><span>@Model.ProductName</span></div>
    <br/>
</p>

<script type="text/javascript">

    $(function() {

        $("#applyPromoCode").click(function () {
            $.ajax({
                url: "@Url.Action("ApplyPromoCode", "Profile")",
	            type: "POST",
	            data: { promocode: $("#PromoCode").val() },
	            cache: false,
	            success: function (result) {
	                if (result.message != "") {
	                    $("#promoCodeErrorMessage").attr('style', 'display:inline-block; color: red');
	                    //$("#promoCodeErrorMessage")[0].innerText = result.message;
	                    //$("#promoCodeErrorMessage")[0].textContent = result.message;
	                    $("#promoCodeErrorMessage").text(result.message);
	                } else {
	                    $("#costDue")[0].textContent = '$' + result.price;
	                    $("#applyPromoCode").hide();
	                    $("#balanceDueDescription").hide();
	                    $("#promoCodeErrorMessage").attr('style', 'display:none');
	                    $("#promocodevalue")[0].innerText = $("#PromoCode").val();
	                    $("li.checkout").load("@Url.Action("PayPalForm")");
	                }
	                
                    
	            }
	        });
            return false;
        });
    });
</script>